<template>
  <view >
    <view class="good-item">
      <!-- 左侧盒子 -->
      <view class="good-item-left">
        <!-- 图标 --> 
              <label class="radio-box" v-if="showRadio" @click="radioChangeHandler">
                 <radio :checked="good.goods_state == 2" value="" color="red" />
               </label>
        <image :src="good.goods_small_logo || defaultPic" mode="" class="good-pic"></image>
      </view>
      <!-- 右侧盒子 -->
      <view class="good-item-right">
        <view class="good-name">
          {{good.goods_name}}
        </view>
        <view class="good-info-box">
            <view class="good-price">
              ￥{{good.goods_price}}.00
            </view>
             <uni-number-box  :min="1" :value="good.goods_count" v-if="showNum" @change="numChangeHandler"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
     good:{
       // 商品的信息对象
       type:Object,
       default:{}
     },
     showRadio:{
       type:Boolean,
       //表示携带的默认值
       default:false
     },
     showNum:{
       type:Boolean,
       //表示携带的默认值
       default:false
     }
    },
    data(){
      return{
        //默认图片
        defaultPic:'https://ts1.cn.mm.bing.net/th/id/R-C.02b5ca829bc41e16a1cd623e45dcef63?rik=iuEZcQCMehGisg&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fa%2f1f%2ffe86797f3c.jpg&ehk=IyKlT1zw%2fhLBzP09%2bdHPPWHStnu%2bgK3ufnvsMpntlCw%3d&risl=&pid=ImgRaw&r=0'
      }
    },
   methods:{
     //radio点击事件处理函数
     radioChangeHandler(){
        this.$emit('radio-change',{
           goods_id:this.good.goods_id,
           goods_state:this.good.goods_state==1? 2 : 1
        })
     },
     //改变商品数量的函数
     numChangeHandler(e){
         this.$emit('num-change',{
           goods_id:this.good.goods_id,
            goods_count:e
         })
     }
   }
  }
</script>

<style lang="scss">
  .good-item{
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    .good-item-left{
      display: flex;
      justify-content:space-between;
      align-items: center;
      .good-pic{
        display: block;
        margin-right: 5px;
        width: 100px;
        height: 100px;
      }
    }
    .good-item-right{
      display: flex;
      flex: auto;
      flex-direction: column;
      justify-content: space-between;
      .good-name{
        font-size: 13px;
      }
      .good-info-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .good-price{
          font-size: 16px;
          color: red;
        }
      }
    }
  }
  </style>